<template>
	<div class="add-address">
		<div class="title">我的收货地址</div>
		<el-button type="success" style="margin-top:10px;" @click="handleAdd">添加</el-button>
		<div v-for="(item,index) in allAddressData" :key="index" class="default-address-container">
			<div>
				<div class="address-item">收货人：{{item.consignee}}</div>
				<div class="address-item">收货地址：{{item.addressDelivery}}</div>
				<div class="address-item">收货手机号：{{item.phone}}</div>
			</div>
			<div class="right-btn">
				<el-tag style="position:relative;top:-40px;right:-138px;margin-right: 20px;" v-if="item.defaultAddress"
					type="success">默认收货地址</el-tag>
				<div class="marginR20" @click="handleEdit(item)">编辑</div>
				<div class="marginR20" @click="handleDel(item)">删除</div>
			</div>
		</div>
		<el-dialog :title="title" :visible.sync="showAdd" width="580px" :before-close="closeAdd">
			<el-form :model="addressData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="收货人：" prop="consignee">
					<el-input v-model="addressData.consignee"></el-input>
				</el-form-item>
				<el-form-item label="收货地址：" prop="addressDetail">
					<el-input v-model="addressData.addressDelivery"></el-input>
				</el-form-item>
				<el-form-item label="收货手机号：" prop="phone">
					<el-input v-model="addressData.phone"></el-input>
				</el-form-item>
				<el-checkbox style="float:right;" v-model="addressData.defaultAddress">设为默认地址</el-checkbox>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAdd">取 消</el-button>
				<el-button type="success" @click="updateAddress">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import adderssApi from "@/api/address.js"
	export default {
		data() {
			return {
				userInfo: {},
				addressData: {
					consignee: "",
					phone: '',
					addressDelivery: '',
					defaultAddress: 0
				},
				allAddressData: [],
				dialogVisible: false,
				showAdd: false,
				title: '添加地址'
			};
		},
		methods: {
			async getAllAdress() {
				const res = await adderssApi.AddressAll('/znDeliveryAddress/addressAll');
				if (res.code = 200) {
					this.allAddressData = res.data
				}
			},
			handleChange() {
				this.dialogVisible = true
			},
			submitChange() {
				this.dialogVisible = false
			},
			handleClose() {
				this.dialogVisible = false
			},
			handleSelectionChange(row, column) {
				this.addressData = [...row]
			},
			handleAdd() {
				this.showAdd = true
				this.title = '添加地址'
				this.addressData = {}
				
			},
			closeAdd() {
				this.showAdd = false
				this.addressData = {}
			},
			async updateAddress() {
				if (this.addressData.consignee == "") {
					alert("收货人不能为空");
					return;
				} else if (this.addressData.phone == "") {
					alert("手机号不能为空");
					return;
				} else if (this.addressData.addressDelivery == "") {
					alert("收货地址不能为空");
					return;
				}
				if (this.title === '编辑地址') {
					const res = await adderssApi.editAddress('/znDeliveryAddress/editAddress', {
						
						addressId: this.addressData.addressId,
						consignee: this.addressData.consignee,
						phone: this.addressData.phone,
						addressDelivery: this.addressData.addressDelivery,
						defaultAddress: this.addressData.defaultAddress ? 1 : 0,
					}).then((res) => {
						if (res.flag == true) {
							this.getAllAdress()
							this.$message.success(res.msg)
							this.showAdd = false
						} else {
							this.showAdd = false
							this.$message.error(res.data)
						}
					});
				} else {
					const res = await adderssApi.addUserAddress('znDeliveryAddress/addUserAddress',{
						consignee: this.addressData.consignee,
						phone: this.addressData.phone,
						addressDelivery: this.addressData.addressDelivery,
						defaultAddress: this.addressData.defaultAddress ? 1 : 0,
					}).then((res) => {
						if (res.flag == true) {
							this.getAllAdress()
							this.$message.success(res.msg)
							this.showAdd = false
						} else {
							this.showAdd = false
							this.$message.error(res.data)
						}
					});
				}
			},
			handleEdit(item) {
				this.showAdd = true
				this.title = '编辑地址'
				this.addressData = item
				this.addressData.defaultAddress = Boolean(this.addressData.defaultAddress);
			},
			async deleteAddress(itme){
				const res = await adderssApi.deleteAddress('/znDeliveryAddress/deleteAddress/'+itme.addressId);
			},
			handleDel(itme) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteAddress(itme),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getAllAdress();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.getAllAdress();
		},
	};
</script>

<style lang="scss" scoped>
	.add-address {

		padding: 20px;
		background: #fff;
		min-height: 84vh;

		.title {
			border-bottom: 1px solid #f2f2f2;
			padding: 10px 0px;
			font-size: 18px;
		}
	}

	.default-address-container {
		border: 1px dashed #ccc;
		border-radius: 6px;
		padding: 10px 20px;
		display: flex;
		margin-top: 20px;
		align-items: center;
		justify-content: space-between;

		.address-item {
			line-height: 30px;
			height: 30px;
			margin-right: 50px;
		}

		.right-btn {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.marginR20 {
				margin-right: 20px;
				cursor: pointer;
				color: #67C23A;

				&:hover {
					color: #035D1C;
					text-decoration: underline;
				}
			}
		}
	}
</style>